<!--
 * @description 按钮组件
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
-->
<template>
	<button
		class="pure-button"
		:class="_classes"
		:style="_styles"
		:form-type="$attrs.formType || $attrs['form-type']"
		:open-type="$attrs.openType || $attrs['open-type']"
		:hover-class="
			$attrs.hoverClass || $attrs['hover-class'] || 'pure-hover'
		"
		:hover-start-time="$attrs.hoverStartTime || $attrs['hover-start-time']"
		:hover-stay-time="$attrs.hoverStayTime || $attrs['hover-stay-time']"
		:app-parameter="$attrs.appParameter || $attrs['app-parameter']"
		:hover-stop-propagation="
			$attrs.hoverStopPropagation || $attrs['hover-stop-propagation']
		"
		:lang="$attrs.lang"
		:session-from="$attrs.sessionFrom || $attrs['session-from']"
		:send-message-title="
			$attrs.sendMessageTitle || $attrs['send-message-title']
		"
		:send-message-path="
			$attrs.sendMessagePath || $attrs['send-message-path']
		"
		:send-message-img="$attrs.sendMessageImg || $attrs['send-message-img']"
		:show-message-card="
			$attrs.showMessageCard || $attrs['show-message-card']
		"
		:group-id="$attrs.groupId || $attrs['group-id']"
		:guild-id="$attrs.guildId || $attrs['guild-id']"
		:public-id="$attrs.publicId || $attrs['public-id']"
		:data-im-id="$attrs.dataImId || $attrs['data-im-id']"
		:data-im-type="$attrs.dataImType || $attrs['data-im-type']"
		:data-goods-id="$attrs.dataGoodsId || $attrs['data-goods-id']"
		:data-order-id="$attrs.dataOrderId || $attrs['data-order-id']"
		:data-biz-line="$attrs.dataBizLine || $attrs['data-biz-line']"
		@getphonenumber="$emit('getphonenumber', $event)"
		@getuserinfo="$emit('getuserinfo', $event)"
		@error="$emit('error', $event)"
		@opensetting="$emit('opensetting', $event)"
		@launchapp="$emit('launchapp', $event)"
		@contact="$emit('contact', $event)"
		@chooseavatar="$emit('chooseavatar', $event)"
		@agreeprivacyauthorization="$emit('agreeprivacyauthorization', $event)"
		@addgroupapp="$emit('addgroupapp', $event)"
		@chooseaddress="$emit('chooseaddress', $event)"
		@chooseinvoicetitle="$emit('chooseinvoicetitle', $event)"
		@subscribe="$emit('subscribe', $event)"
		@login="$emit('login', $event)"
		@im="$emit('im', $event)"
		@tap="_handleTap"
	>
		<!-- Loading 状态 -->
		<view class="pure-button__content pure-button__loading" v-if="loading">
			<slot name="loading">
				<!-- loading 图标 -->
				<view
					class="pure-button__icon pure-button__icon--loading"
					v-if="loadingIconName || $slots.loadingIcon"
				>
					<slot name="loadingIcon">
						<pure-icon
							:name="loadingIconName"
							:mode="
								$attrs.loadingIconMode ||
								$attrs['loading-icon-mode']
							"
						></pure-icon>
					</slot>
				</view>

				<!-- loading 文本 -->
				<view
					class="pure-button__text pure-button__text--loading"
					v-if="(loadingText || $slots.loadingText) && !iconBtn"
				>
					<slot name="loadingText">
						<text class="pure-button__text__text">{{
							loadingText
						}}</text>
					</slot>
				</view>
			</slot>
		</view>

		<!-- 默认状态 -->
		<view class="pure-button__content pure-button__default" v-else>
			<!-- 前置图标 -->
			<view
				class="pure-button__icon pure-button__icon--front"
				v-if="_showIcon"
			>
				<slot name="icon">
					<pure-icon
						:name="iconName"
						:mode="$attrs.iconMode || $attrs['icon-mode']"
					></pure-icon>
				</slot>
			</view>

			<!-- 按钮文本 -->
			<view
				class="pure-button__text pure-button__text--default"
				v-if="!iconBtn"
			>
				<slot>
					<text class="pure-button__text__text">{{ text }}</text>
				</slot>
			</view>

			<!-- 后置图标 -->
			<view
				class="pure-button__icon pure-button__icon--after"
				v-if="_showAfterIcon"
			>
				<slot name="afterIcon">
					<pure-icon
						:name="afterIconName"
						:mode="
							$attrs.afterIconMode || $attrs['after-icon-mode']
						"
					></pure-icon>
				</slot>
			</view>
		</view>
	</button>
</template>

<script>
import commonComponentOptions from "../../config/common-component-options";
export default {
	options: commonComponentOptions,
};
</script>

<script setup>
import { ref, computed } from "vue";
import props from "./props";

// **************************************************************************************************************
// * Refs
// **************************************************************************************************************
let _timer = null;

// **************************************************************************************************************
// * Options
// **************************************************************************************************************
defineOptions(commonComponentOptions);

// **************************************************************************************************************
// * Props
// **************************************************************************************************************
const _props = defineProps(props);

// **************************************************************************************************************
// * Emits
// **************************************************************************************************************
const _emits = defineEmits([
	"tap",
	"debounce",
	"getphonenumber",
	"getuserinfo",
	"error",
	"opensetting",
	"launchapp",
	"contact",
	"chooseavatar",
	"agreeprivacyauthorization",
	"addgroupapp",
	"chooseaddress",
	"chooseinvoicetitle",
	"subscribe",
	"login",
	"im",
]);

// **************************************************************************************************************
// * Slots
// **************************************************************************************************************
const _slots = defineSlots();

// **************************************************************************************************************
// * Classes
// **************************************************************************************************************
const _classes = computed(() => {
	const array = [];

	// 是否禁用
	if (_props.disabled) array.push("pure-button--disabled");

	// 主题按钮
	if (_props.theme) {
		array.push("pure-button--theme");

		// 不是以 "--" 开头的，则默认认为是 pure 内置主题
		if (!_props.theme.startsWith("--")) {
			array.push(`pure-button--theme--${_props.theme}`);
		}

		// 否则则直接使用用户自定义的 css 变量
		else array.push(`pure-button--theme${_props.theme}`);
	}

	// 幽灵按钮
	if (_props.ghost) array.push("pure-button--ghost");

	// 镂空按钮
	if (_props.plain) array.push("pure-button--plain");

	// 是否显示边框
	if (_props.border) array.push("pure-button--border");

	// 块级按钮
	if (_props.block) array.push("pure-button--block");

	// 图标按钮
	if (_props.iconBtn) array.push("pure-button--icon");

	// 链接按钮
	if (_props.linkBtn) array.push("pure-button--link");

	// 圆形按钮
	if (_props.circle) array.push("pure-button--circle");

	// 是否显示下划线
	if (_props.underline) array.push("pure-button--underline");

	// 圆角按钮
	if (_props.round) array.push("pure-button--round");

	// 矩形按钮
	if (_props.square) array.push("pure-button--square");

	// 大小
	if (_props.size) array.push(`pure-button--${_props.size}`);

	return array;
});

// **************************************************************************************************************
// * Styles
// **************************************************************************************************************
const _styles = computed(() => {
	const array = [];

	// 主题按钮
	if (_props.theme) {
		// 不是以 "--" 开头的，则默认认为是 pure 内置主题
		if (!_props.theme.startsWith("--")) {
			array.push(
				`--pure-button-theme-value: var(--pure-theme-${_props.theme})`
			);
		}

		// 否则则直接使用用户自定义的 css 变量
		else array.push(`--pure-button-theme-value: var(${_props.theme})`);
	}

	return array;
});

// **************************************************************************************************************
// * Computed
// **************************************************************************************************************
// 是否显示前置图标
const _showIcon = computed(() => {
	return _props.iconName || _slots.icon;
});

// 是否显示后置图标
const _showAfterIcon = computed(() => {
	// 非图标按钮
	if (!_props.iconBtn) return _props.afterIconName || _slots.afterIcon;
	// 图标按钮 && 设置了前置图标：优先展示前置图标
	if (_props.iconName || _slots.icon) return false;
	// 图标按钮 && 未设置前置图标：展示后置图标
	return _props.afterIconName || _slots.afterIcon;
});

// **************************************************************************************************************
// * Functions
// **************************************************************************************************************
// 点击事件
function _handleTap() {
	// 开启了防抖
	if (_props.debounce) {
		// 判断是否还在防抖中
		// 还在防抖中
		if (_timer) {
			// 判断是否设置了防抖提示语
			// 设置了防抖提示语
			if (_props.tips) {
				uni.showToast({
					title: _props.tips,
					icon: "none",
					mask: true,
					duration: 1000,
				});
				return;
			}

			// 未设置防抖提示语
			// 触发防抖事件
			_emits("debounce");
			return;
		}

		// 未在防抖中
		// 设置防抖定时器
		_timer = setTimeout(() => {
			// 触发点击事件
			_emits("tap");

			// 清除定时器
			clearTimeout(_timer);
			_timer = null;
		}, _props.time);
		return;
	}

	// 未开启防抖
	// 触发点击事件
	_emits("tap");
}
</script>

<style scoped lang="scss">
@import "./style.scss";
</style>
